<template>
  <view class="stage-new-built">
    <nav-bar left-text="新增驿站" />
    <bg-set background="#f2f3f7" />
    <view class="stage-new-built__main f">
      <uni-forms :modelValue="formData" :rules="rules">
        <uni-forms-item label="驿站名称" name="name" :required="true">
          <uni-easyinput
            type="text"
            v-model="formData.name"
            :inputBorder="false"
            placeholder="请输入驿站名称"
          />
        </uni-forms-item>
        <uni-forms-item label="驿站地址" name="address" :required="true">
          <uni-easyinput
            type="text"
            v-model="formData.address"
            :inputBorder="false"
            placeholder="请输入驿站地址"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="stage-new-built__footer f jc-c ai-c">
      <van-button
        :disabled="disabled"
        :loading="btnLoading"
        @click="buildStage"
        type="primary"
        round
        loading-type="spinner"
        loading-text="新增驿站中"
        style="width: 80%"
        >新增驿站</van-button
      >
    </view>
  </view>
</template>

<script>
import { ref, reactive, computed } from "vue";
import profileAPI from "/api/modules/profile";
import storageOperation from "/utils/index";
export default {
  name: "stage-new-built",
  setup() {
    const rules = {
      // 对name字段进行必填验证
      name: {
        rules: [
          {
            required: true,
            errorMessage: "驿站名称不能为空!",
          },
        ],
      },
      address: {
        rules: [
          {
            required: true,
            errorMessage: "驿站地址不能为空!",
          },
        ],
      },
    };
    const btnLoading = ref(false);
    const formData = reactive({
      name: "",
      address: "",
    });
    const disabled = computed(
      () => formData.name === "" || formData.address === ""
    );
    const buildStage = () => {
      const userName = storageOperation.getStorageSync("userName").value;
      const params = {
        userName,
        stageName: formData.name,
        address: formData.address,
      };
      profileAPI
        .insertStage(params)
        .then((res) => {
          btnLoading.value = true;
          uni.showToast({
            title: "新增驿站成功",
            icon: "success",
            duration: 1000,
            position: "top",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/profile/stageSetting/stage-setting",
            });
          }, 2000);
        })
        .catch((err) => {
          uni.showToast({
            title: "新增驿站失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          btnLoading.value = false;
        });
    };
    return {
      rules,
      btnLoading,
      formData,
      disabled,
      buildStage,
    };
  },
};
</script>
<style lang='scss' scoped>
.stage-new-built {
  position: fixed;
  width: 100%;
  height: 100vh;
  &__main {
    padding: 40rpx;
    width: 100%;
    height: calc(100vh - 44rpx);
    box-sizing: border-box;
    background-color: #fff;
    ::v-deep .uni-forms {
      flex: 1;
    }
    ::v-deep .uni-easyinput__content {
      border-bottom: 1px solid #999;
      .uni-input-placeholder {
        font-size: 30rpx;
      }
    }
    ::v-deep .uni-forms-item__label {
      width: 160rpx !important;
      .label-text {
        font-size: 30rpx;
      }
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px #eee;
  }
}
</style>